<template>
  <!-- 墙 -->
  <div class="wall">
    <h2 class="title">有什么想对我说的</h2>
    <div class="progress" v-if="progress">
      <ProgressSpinner
        style="
          width: 50px;
          height: 50px;
          display: flex;
          justify-content: center;
        "
        stroke-width="8"
        fill="transparent"
        animationDuration=".5s"
        aria-label="Custom ProgressSpinner"
      ></ProgressSpinner>
    </div>
    <div class="body" v-else>
      <div
        class="card"
        v-for="(item, index) in wallList"
        :ref="(el) => (cardRef[index] = el)"
        :key="item.id"
        :style="getCardStyle(index, item.background)"
        @mouseenter="cardAnimateIn"
        @mouseleave="cardAnimateOut"
      >
        <div class="createTime">{{ item.createTime }}</div>
        <div class="content">{{ item.content }}</div>
        <div class="username">{{ item.username }}</div>
      </div>
      <div class="add" @click="messageVisable">
        <el-icon><Plus /></el-icon>
      </div>
      <el-dialog
        v-model="addMessageVisable"
        width="520"
        align-center
        title="添加留言"
      >
        <el-form
          :model="submitMessage"
          :rules="rules"
          class="form"
          ref="formRef"
        >
          <el-form-item prop="content">
            <p>留言</p>
            <el-input
              v-model="submitMessage.content"
              type="textarea"
              maxlength="100"
              class="form-content"
              show-word-limit
              :rows="3"
              :autosize="{ minRows: 3, maxRows: 4 }"
              placeholder="实例: 你好呀"
            ></el-input>
          </el-form-item>
          <el-form-item prop="username">
            <p>你的昵称</p>
            <el-input
              placeholder="实例:可梵"
              v-model="submitMessage.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="userEmail">
            <p>你的邮箱</p>
            <el-input
              placeholder="实例:xxxxxx@.xxx"
              type="email"
              v-model="submitMessage.userEmail"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <p>留言背景色</p>
            <div class="bgc">
              <div class="item" v-for="item in wallBgcList" :key="item.id">
                <el-checkbox
                  v-model="submitMessage.background"
                  :true-value="item.background"
                ></el-checkbox>
                <div
                  class="box"
                  :style="{ backgroundColor: item.background }"
                ></div>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              class="form-btn"
              style="
                width: 100%;
                height: 36px;
                background-color: #84c5e4;
                color: #fff;
                border-radius: 10px;
                border: none;
              "
              @click="submitWall"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div class="page">
      <el-pagination
        v-model="query.page"
        v-model:page-size="query.pageSize"
        :disabled="false"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handlePageChange"
        @size-change="handlePageSizeChanbge"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import gsap from "gsap";
import { onMounted, ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import {
  getWallBgcListService,
  getWallPageService,
  userAddMessageService,
} from "@/api/Wall";
import {
  getLocalToUserInfo,
  setUserNameWithUserEmail,
} from "@/utils/UserInfoStore";

const progress = ref(true);

const total = ref(0);
const wallList = ref([]);
const wallBgcList = ref([]);
const query = ref({
  page: 1,
  pageSize: 6,
});

const addMessageVisable = ref(false);
// 留言表单内容
const submitMessage = ref({
  content: "",
  username: "",
  userEmail: "",
  background: "",
});

const cardRef = ref([]);
/**
 * 卡片动画
 * @param event
 */
const cardAnimateIn = (event) => {
  const targetCard = event.target.closest(".card");
  if (targetCard) {
    gsap.to(targetCard, {
      y: "-5px",
      duration: 0.1,
    });
  }
};
const cardAnimateOut = (event) => {
  const targetCard = event.target.closest(".card");
  if (targetCard) {
    gsap.to(targetCard, {
      y: "0px",
      duration: 0.1,
    });
  }
};
// 判断索引奇偶性来设置旋转角度
const getCardStyle = (index, bgc) => {
  let rotation = 0;
  if (index % 2 === 1) {
    rotation = -2; // 奇数向左倾斜2度
  } else {
    rotation = 2; // 偶数向右倾斜2度
  }
  return {
    transform: `rotate(${rotation}deg)`,
    backgroundColor: `${bgc}`,
  };
};

const messageVisable = () => {
  addMessageVisable.value = true;
  getUserInfo();
  getWallBgcList();
};
const formRef = ref();
// 表单验证
const rules = {
  content: [
    {
      required: true,
      message: "留言内容不能为空",
      tirgger: "blur",
    },
  ],
  username: [
    {
      required: true,
      message: "昵称不能为空",
      tirgger: "blur",
    },
  ],
  userEmail: [
    {
      required: true,
      message: "邮箱不能为空",
      tirgger: "blur",
    },
  ],
};
/**
 * 提交留言信息
 */
const submitWall = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      userAddMessageService(submitMessage.value).then(() => {
        const nameWithEmail = {
          username: submitMessage.value.username,
          userEmail: submitMessage.value.userEmail,
        };
        setUserNameWithUserEmail(nameWithEmail);
        addMessageVisable.value = false;
        getWallList(query.value);
      });
    }
  });
};

/**
 * 分页相关
 */
const handlePageChange = (page) => {
  query.value.page = page;
  getWallList(query.value);
};
const handlePageSizeChanbge = (pageSize) => {
  query.value.pageSize = pageSize;
  getWallList(query.value);
};

/**
 * 分页查询留言信息
 * @param query
 */
const getWallList = async (query) => {
  await getWallPageService(query).then(({ data }) => {
    progress.value = false;
    total.value = data.total;
    wallList.value = data.records;
  });
};
/**
 * 获取留言背景色
 */
const getWallBgcList = async () => {
  const { data } = await getWallBgcListService();
  wallBgcList.value = data;
};
/**
 * 获取local中的用户信息
 */
const getUserInfo = () => {
  const obj = getLocalToUserInfo();
  if (obj) {
    submitMessage.value.username = obj.username;
    submitMessage.value.userEmail = obj.userEmail;
  }
};

onMounted(() => {
  getWallList(query.value);
});
</script>

<style lang="scss" scoped>
.wall {
  min-height: 102.5vh;
  padding: 24px;
  background: #fff;
  border-radius: 0px 0px 12px 12px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);

  .title {
    margin-bottom: 36px;
    text-align: left;
    font-weight: 500;
    font-family: "Courier New", Courier, monospace;
  }

  .body {
    padding: 20px;
    min-height: 20vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    @media (max-width: 768px) {
      padding: 10px;
    }

    .card {
      position: relative;
      width: 287px;
      margin: 15px 0px;
      height: 159px;
      padding: 10px;
      background-color: #a8dbeb9a;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
      border-radius: 12px;
      transition: all 0.3s;
      cursor: pointer;

      @media (max-width: 768px) {
        margin: 0 auto;
        width: 90%;
        margin-bottom: 15px;
      }

      .createTime {
        margin-bottom: 15px;
        font-size: 14.5px;
        color: #75787c;
      }

      .content {
        padding: 5px;
        font-size: 15px;
        color: #242629;
      }

      .username {
        position: absolute;
        bottom: 10px;
        right: 20px;
        font-size: 15px;
        color: #242629;
      }
    }

    .add {
      position: fixed;
      top: 90vh;
      right: 25vw;
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26px;
      color: #fff;
      cursor: pointer;
      border-radius: 50%;
      background-color: #333;
      transition: all 0.3s;

      @media (max-width: 768px) {
        right: 3px;
        top: 80vh;
      }
    }

    .form {
      font-size: 15px;
      color: #a8abb2;

      p {
        margin-right: 10px;
      }

      .bgc {
        display: flex;
        gap: 15px;

        @media (max-width: 768px) {
          gap: 10px;
        }
        .item {
          display: flex;
          align-items: center;
          gap: 10px;
          @media (max-width: 768px) {
            gap: 5px;
          }
          .box {
            width: 22px;
            height: 22px;
            background-color: #fff7df;
            border-radius: 7px;
          }
        }
      }
    }
  }

  .page {
    margin-top: 50px;
    display: flex;
    justify-content: end;
  }
}
</style>